<template>
	<view class="page-body signIn" :class="[app.setCStyle()]">
		<u-navbar back-text="返回">
			<view slot="right" @click="app.goPage('signLog')" class="fs32 u-p-r-20">签到明细</view>
		</u-navbar>
	        <view class="top">
				<view class="weui-cell">
					<view class="weui-cell__bd">
						<view class="sign" v-if="!isSign" @click='doSign'>立即签到</view>
						<view class="signed" v-else >已签到</view>
					</view>
					<!-- <view class="p20 color-ff mt40 text-center">
						签到+{{integral}}积分{{luckdraw_num>0?'，+'+luckdraw_num+'次抽奖':''}}，您已连续签到{{constant}}天
							<view v-for="(item, index) in sign_constant" :key="index" class="mt10 color-cc" :class="item.day<=constant?'base-color':''">
								连续签到{{item.day}}天，+{{item.integral}}积分{{item.luckdraw_num>0&&luckdraw_num>0?'，+'+item.luckdraw_num+'次抽奖':''}}
							</view>
					</view> -->
					
				</view>
	        </view>
	        <view class="Calendar">
	            <view id="toyear" class="flex flex-pack-center fs38 color_9">
	                <view class="year-month fs30 font-w700 color_3" @click="showCalendar = true">
	                    <text class="u-m-r-10">{{year}}年{{month}}月</text>
						<u-icon name="arrow-up-fill" :custom-style="{'transform':'rotate(90deg)'}" size="28"></u-icon>
	                </view>
	            </view>
	            <view class='tou fs28 font-w700 color_3'>
	                <text>日</text>
	                <text>一</text>
	                <text>二</text>
	                <text>三</text>
	                <text>四</text>
	                <text>五</text>
	                <text>六</text>
	            </view>
	            <view class="dateBox">
	                <block v-for="(item, index) in dateArr" :key="index">
	                    <view class="fs30 font-w700 " :class="index<firstDay||index>=lastDay?'notMonth':''">
							<text v-if="item.isTodaySign" class="sign-today"></text>
	                        <text v-else :class="item.isSame?'signActive':''">{{item.date}}</text>
	                    </view>
	                </block>
	            </view>
	        </view>
	    <view class="model" v-if='modelType'>
	        <view class="modelBg" @click='closeModel'></view>
	        <view class="canter">
	            <view class="data">
	                <p class="fs32 color_r">签到成功</p>
	                <view class="ff color_r">+{{total_integral}}积分</view>
					<view v-if="total_luckdraw_num>0" class="ff color_r ">+{{total_luckdraw_num}}抽奖次数</view>
	            </view>
	        </view>
	        <view class="closeBox" @click='closeModel'>
	            <image src='/static/public/images/close_wy.png'></image>
	        </view>
	    </view>
		
		<u-select @confirm="dateConfirm" confirm-color="#5CB61A" v-model="showCalendar" mode="mutil-column-auto" :default-value='defaultDate' :list="dateList"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCalendar: false,
				isSign: false,
				year: '',
				month: '',
				day: '',
				dateArr: [],
				firstDay: '',
				lastDay: '',
				signDay: [], //环形签到日期
				dayString: '', //当天时间戳
				modelType: false,
				sign_constant:{},
				integral:0,
				luckdraw_num:0,
				constant:0,
				total_integral:0,
				total_luckdraw_num:0,
				defaultDate: [],
				dateList:[],
				monthList: [
					{value: 12, label: '12月'},
					{value: 11, label: '11月'},
					{value: 10, label: '10月'},
					{value: 9, label: '9月'},
					{value: 8, label: '8月'},
					{value: 7, label: '7月'},
					{value: 6, label: '6月'},
					{value: 5, label: '5月'},
					{value: 4, label: '4月'},
					{value: 3, label: '3月'},
					{value: 2, label: '2月'},
					{value: 1, label: '1月'},
				],
				selectYear: '',
				selectMonth: '',
			}
		},
		onLoad(options) {
			this.signIndex();
			this.setDateList();
		},
		methods: {
			//获取签到信息
			signIndex() {
				this.$u.post('member/api.Center/signIndex', {year: this.selectYear, month: this.selectMonth}).then(res => {
					if (res.code == 1 && res.data.signDay) {
						if(!this.isSign) this.isSign = res.data.isSign == 1?true:false;
						this.constant = res.data.constant;
						this.sign_constant = res.data.sign_constant;
						this.signDay = res.data.signDay;
						this.dayString = res.data.timeData*1000;
						this.integral = res.data.use_integral;
						this.luckdraw_num = res.data.luckdraw_num;
					}
					this.setDate();
				});
			},
			//画日历
			setDate() {
				let currentDate = new Date();
				let currentY = currentDate.getFullYear();
				let currentM = currentDate.getMonth() + 1;
				let currentD = currentDate.getDate();
				let mydate = new Date(this.dayString);
				this.year = mydate.getFullYear();
				this.month = mydate.getMonth() + 1;
				this.day = mydate.getDate();
				let firstDay = new Date(this.year, this.month - 1, 1).getDay();
				let Arr = [];
				let LastDay = new Date(this.year, this.month, 0).getDate();
				let isSame = false;
				let isTodaySign = false;
				let signDay = this.signDay
				//用当月第一天在一周中的日期值作为当月离第一天的天数
				let tianNums = new Date(this.year, this.month - 1, 0).getDate();
		
				for (let i = 1; i <= firstDay; i++) {
					Arr.unshift({
						date: tianNums - i + 1
					});
				}
				
				//用当月最后一天在一个月中的日期值作为当月的天数
				for (var i = 1; i < LastDay + 1; i++) {
					isSame = false;
					isTodaySign = false;
					for (var ii = 0; ii < signDay.length; ii++) {
						//是否签到
						if (signDay[ii] == i){
							isSame = true;
							if(this.year == currentY && this.month == currentM && signDay[ii] == currentD) isTodaySign = true;
							break;
						}
					}
					Arr.push({
						'date': i,
						'isSame': isSame,
						'isTodaySign': isTodaySign
					});
				}
				//当月最后一天未满7天
				for (let i = 1, lastDayWeek = new Date(this.year, this.month - 1, LastDay).getDay(); i < 7 - lastDayWeek; i++) {
					Arr.push({
						date: i
					});
				}
				this.dateArr = Arr;
				this.firstDay = firstDay;
				this.lastDay = firstDay + LastDay;
			},
			//签到
			doSign() {
				if (this.isSign == false) {
					this.$u.post('member/api.Center/signIng').then(res => {
						if (res.code == 1) {
							this.modelType = true;
							this.total_integral = res.data.total_integral;
							this.total_luckdraw_num = res.data.total_luckdraw_num;
							this.signIndex();
						}
					});
				} else {
					uni.showToast({
					    title: '今天已经签到过！',
					    duration: 2000
					});
				}
			},
			closeModel(){
				this.modelType = false;
			},
			setDateList() {
				let mydate = new Date();
				let year = mydate.getFullYear();
				let month = mydate.getMonth() + 1;
				
				let len = year - 2020;
				
				for(let i = 0; i <= len; i++){
					this.dateList[i] = [];
					let y = year - i;
					let d = {
						value: y,
						label: y
					}
					//this.dateList[i].push(d);
					this.dateList[i].value = y;
					this.dateList[i].label = y;
					if(i == 0){
						this.defaultDate[0] = 0;
						let children = [];
						for(let m = month; m >= 1; m--){
							let mm = {
								value: m,
								label: m + '月'
							}
							children.push(mm)
						}
						console.log('children', children)
						this.dateList[i].children = children
					}else{
						this.dateList[i].children = this.monthList
					}
				}
				this.defaultDate[1] = 0;
			},
			dateConfirm(data){
				console.log('data', data);
				this.selectYear = data[0].value;
				this.selectMonth = data[1].value;
				this.dateList.forEach((item, index) =>{
					if(this.selectYear == item.value){
						this.defaultDate[0] = index;
						
						item.children.forEach((m, i) =>{
							if(this.selectMonth == m.value ) this.defaultDate[1] = i;
						})
					} 
					
				})
				this.signIndex();
			}
		}
	}
</script>

<style>
	.uni-btn-icon{
		color: #fff; 
		font-size: 27px;
		position: absolute;
		top:2.5vw;
		left:2vw;
	}
	.text-color {
	    color: #ffc7be;
	}
	.top {
	    background: #fff;
	    width: 100vw;
	    height: 45vh;
	    position: relative;
	}
	.goLog {
	    position: absolute;
	    right: 30rpx;
	    top: 30rpx;
	    z-index: 999;
	}
	.signIn .weui-cell__bd {
	    margin: 108rpx auto 0;
	    display: flex;
	    justify-content: center;
		border-radius: 50%;
		color: #fff;
		width: 220rpx;
		height: 220rpx;
	}
	
	.signIn .weui-cell__bd .sign {
		background: linear-gradient(-54deg, #EF5C3F 0%, #FDA74B 100%);
	}
	.signIn .weui-cell__bd .signed {
		background: #FDD5AF;
	}
	.signIn .weui-cell__bd view {
	    text-align: center;
	    position: relative;
	    z-index: 999;
	    width: 100%;
	    height: 100%;
	    border-radius: 50%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
		font-size: 36rpx;
	}
	.signIn .Calendar {
	    height: 59vh;
	    margin: -13vh 0 0;
	    width: 100vw;
	    background-color: #fff;
	    position: relative;
	    z-index: 999;
	}
	
	.signIn #toyear {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    height: 8vh;
	    padding: 0 40rpx;
	}
	
	.notMonth {
	    color: #999;
	}
	.signActive {
	    width: 80rpx;
	    height: 80rpx;
		border: 2rpx solid #F99348;
		border-radius: 50%;
	    color: #F99348;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	
	.sign-today {
	    width: 80rpx;
	    height: 80rpx;
	    border-radius: 50%;
	    color: #F99348;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		background: url(../../../static/public/images/sign-today.png);
		background-size: 100% 100%;
	}
	
	.tou {
	    display: flex;
	    width: 100%;
	}
	
	.tou text {
	    flex: 1;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    height: 5vh;
	}
	
	.dateBox {
	    display: flex;
	    flex-wrap: wrap;
	    width: 100%;
	    height: 46vh;
	    justify-content: space-between;
	}
	
	.signIn .model {
	    position: fixed;
	    top: 0;
	    left: 0;
	    height: 100vh;
	    width: 100vw;
	    z-index: 999998;
	}
	
	.signIn .modelBg {
	    position: absolute;
	    background-color: rgba(0, 0, 0, 0.6);
	    z-index: 99999;
	    top: 0;
	    left: 0;
	    height: 100vh;
	    width: 100vw;
	}
	
	.signIn .canter {
	    width: 96vw;
	    margin: 25vh 2vw 0 2vw;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    position: relative;
	    z-index: 99999;
		background-color: #FFFFFF;
		color: #000000;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.signIn .canter .canterBG {
	    width: 100%;
	    height: 100%;
	    position: absolute;
	    left: 0;
	    top: 0;
	    z-index: 999999988;
	}
	
	.signIn .canter .data {
	    position: relative;
	    z-index: 9999999888;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
		padding-bottom: 30rpx;
	}
	
	.signIn .canter .data p {
	    margin-top: 50rpx;
	    display: block;
	}
	
	.signIn .canter .data view {
	    font-size: 74rpx;
	    margin-top: 50rpx;
	    line-height: 100rpx;
	}
	
	.signIn .closeBox {
	    margin-top: 0rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    position: relative;
	    z-index: 9999999999;
	}
	.signIn .closeBox image {
	    width: 72rpx;
	    height: 72rpx;
	}
	.dateBox view {
	    width: 14.2857%;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.signIn .weui-cell {
	    background: #fff;
	    height: 100%;
	    overflow: hidden;
	    position: relative;
	    padding: 0;
	    align-items: inherit;
	}
</style>
